<template>
  <div>
    <div class="goods">
      <!-- 推荐列表卡品 -->
      <figure v-for="(item,index) in goods" :key="index" v-show="item.categoryId == 15119" @click="toDetails(item.id)">
        <!-- pic商品首图 -->
        <img :src="item.pic" />

        <p>
          <!-- name商品名称 -->
          {{item.name}}
        </p>
        <p>
          <!-- characteristic	商品特色、卖点 -->
          {{item.characteristic}}
        </p>
        <p>
          <!-- minPrice	当前价格 -->
          ￥:{{item.minPrice}}
        </p>
      </figure>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goods: Array
  },
  methods:{
    toDetails(id){
      this.$router.push({
        path:"/details",
        query:{
          id
        }
      })
    }
  }
};
</script>

<style scoped>
.goods {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
figure {
  width: 40%;
}
figure img {
  width: 100%;
  height: 3rem;
}
figure p {
  width: 100%;
  overflow: hidden;
  margin-top: 0.2rem;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
figure p:nth-child(3) {
  color: #999;
}
</style>